<!-- 父组件：展示向子组件传递多种类型数据的完整示例，包括处理null值和对象数据 -->
<script setup>
// 导入子组件Child（局部组件，必须显式导入才能使用）
import Child from './Child.vue'

// 从Vue导入响应式API：
// ref用于创建基本类型/数组的响应式数据
// reactive用于创建对象类型的响应式数据
import { reactive, ref } from 'vue'

// 定义各种类型的响应式数据，用于传递给子组件
const username = ref('张三')       // 字符串类型的响应式数据
const age = ref(12)                // 数字类型的响应式数据
const isFlag = ref(true)           // 布尔类型的响应式数据
const hobby = ref(['唱歌', '跳舞', '滑冰'])  // 数组类型的响应式数据

// 使用reactive创建对象类型的响应式数据
// reactive适用于复杂对象结构，其属性变化会被Vue追踪
const bodyInfo = reactive({
    height: '175cm',  // 身高属性
    weight: '100kg'   // 体重属性
})
</script>

<template>
    <!-- 向子组件传递不同类型的数据，均通过:init属性绑定 -->
    <!-- 1. 传递字符串类型的响应式数据（ref自动解包，无需.value） -->
    <Child :init="username"/>

    <!-- 2. 传递数字字面量（直接传递原始值） -->
    <Child :init="12"/>

    <!-- 3. 传递数字类型的响应式数据 -->
    <Child :init="age"/>

    <!-- 4. 传递null值（:表示绑定JS表达式，确保传递的是真正的null而非字符串） -->
    <Child :init="null"/>

    <!-- 5. 传递布尔值字面量false -->
    <Child :init="false"/>

    <!-- 6. 传递布尔类型的响应式数据 -->
    <Child :init="isFlag"/>

    <!-- 7. 传递数组字面量 -->
    <Child :init="['唱歌', '跳舞', '滑冰']"/>

    <!-- 8. 传递数组类型的响应式数据 -->
    <Child :init="hobby"/>

    <!-- 针对bodyInfo对象的三种传递方式 -->
    <!-- 1. 传递整个bodyInfo对象（响应式对象） -->
    <Child :init="bodyInfo"/>

    <!-- 2. 传递bodyInfo的单个属性（字符串类型） -->
    <Child :init="bodyInfo.height"/>
    <Child :init="bodyInfo.weight"/>

    <!-- 3. 传递bodyInfo的组合字符串（使用模板字符串拼接） -->
    <Child :init="`身高：${bodyInfo.height}，体重：${bodyInfo.weight}`"/>
</template>

<style scoped>
/* 为父组件添加样式，优化子组件排列效果 */
/* 选择器会自动转换为带哈希的属性选择器，确保仅作用于当前组件 */
:deep(.child-component) {  /* 使用:deep()穿透scoped，影响子组件样式 */
    margin: 8px 0;         /* 子组件之间添加垂直间距 */
}

/* 可选：为父容器添加内边距，增强视觉效果 */
div {
    padding: 10px;
}
</style>